<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
  <title>Style Guide Boilerplate</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#000000">

  <!-- Style Guide Boilerplate Styles -->
  <link rel="stylesheet" href="css/sg-style.css">
  <!--[if lt IE 9]><link rel="stylesheet" href="css/sg-style-old-ie.css"><![endif]-->

  <!-- https://github.com/sindresorhus/github-markdown-css -->
  <link rel="stylesheet" href="css/github-markdown.css">

  <!-- Replace below stylesheet with your own stylesheet -->
  <link rel="stylesheet" href="css/style.css">

  <!-- prism Syntax Highlighting Styles -->
  <link rel="stylesheet" href="vendor/prism/prism.css">
</head>
<body>
  <a href="#main" class="sg-visually-hidden sg-visually-hidden-focusable">Skip to main content</a>

  <div id="top" class="sg-header" role="banner">
    <div class="sg-container">
      <h1 class="sg-logo">
        <span class="sg-logo-initials">SG</span>
        <span class="sg-logo-full">STYLE GUIDE</span> <em>BOILERPLATE</em>
      </h1>
      <button type="button" class="sg-nav-toggle">Menu</button>
    </div>
  </div><!--/.sg-header-->

  <div class="sg-wrapper sg-clearfix">
    <div id="nav" class="sg-sidebar" role="navigation">
      <h2 class="sg-h2 sg-subnav-title">About</h2>
      <ul class="sg-nav-group">
        <li>
          <a href="#sg-about">Getting Started</a>
        </li>
        <li>
          <a href="#sg-colors">Colors</a>
        </li>
        <li>
          <a href="#sg-fontStacks">Fonts</a>
        </li>
      </ul>

      <ul class="sg-nav-group"><li class="sg-subnav-parent"><h2 id="sg-markup-base" class="sg-h2 sg-title">base</h2><ul class="sg-nav-group"><li><a href="#sg-markup-base-address-html">address</a></li><li><a href="#sg-markup-base-blockquote-html">blockquote</a></li><li><a href="#sg-markup-base-details-html">details</a></li><li><a href="#sg-markup-base-figure-html">figure</a></li><li><a href="#sg-markup-base-form-buttons-html">form buttons</a></li><li><a href="#sg-markup-base-form-fields-default-html">form fields default</a></li><li><a href="#sg-markup-base-form-fields-disabled-html">form fields disabled</a></li><li><a href="#sg-markup-base-form-fields-readonly-html">form fields readonly</a></li><li><a href="#sg-markup-base-form-fields-with-datalist-html">form fields with datalist</a></li><li><a href="#sg-markup-base-form-fieldset-html">form fieldset</a></li><li><a href="#sg-markup-base-headings-1-html">headings 1</a></li><li><a href="#sg-markup-base-headings-2-html">headings 2</a></li><li><a href="#sg-markup-base-headings-3-html">headings 3</a></li><li><a href="#sg-markup-base-hr-html">hr</a></li><li><a href="#sg-markup-base-list-definition-html">list definition</a></li><li><a href="#sg-markup-base-list-ordered-html">list ordered</a></li><li><a href="#sg-markup-base-list-unordered-html">list unordered</a></li><li><a href="#sg-markup-base-media-html">media</a></li><li><a href="#sg-markup-base-meter-and-progress-html">meter and progress</a></li><li><a href="#sg-markup-base-preformated-text-html">preformated text</a></li><li><a href="#sg-markup-base-sample-content-block-html">sample content block</a></li><li><a href="#sg-markup-base-tabular-data-html">tabular data</a></li><li><a href="#sg-markup-base-text-elements-html">text elements</a></li><li><a href="#sg-markup-base-time-html">time</a></li></ul></li><li class="sg-subnav-parent"><h2 id="sg-markup-patterns" class="sg-h2 sg-title">patterns</h2><ul class="sg-nav-group"><li><a href="#sg-markup-patterns-alerts-html">alerts</a></li><li><a href="#sg-markup-patterns-breadcrumbs-html">breadcrumbs</a></li></ul></li></ul>    </div><!--/.sg-sidebar-->

    <div id="main" class="sg-main" role="main">
      <div class="sg-container">
        <div class="sg-info">
          <div class="sg-about sg-section">
            <h2 id="sg-about" class="sg-h2">Getting Started</h2>
            <p>A living style guide is a great tool to promote visual consistency, unify UX designers and front-end developers, as well as speed up development times. Add some documentation here on how to get started with your new style guide and start customizing this boilerplate to your liking.</p>
            <p>If you are looking for resources on style guides, check out <a href="http://styleguides.io">styleguides.io</a>. There are a ton of great articles, books, podcasts, talks, and other style guide tools!</p>
          </div><!--/.sg-about-->

          <!-- Manually add your UI colors here. -->
          <div class="sg-colors sg-section">
            <h2 id="sg-colors" class="sg-h2">Colors</h2>
            <div class="sg-color-grid">
              <div class="sg-color">
                <div class="sg-color-swatch" style="background-color: #1abc9c;"></div>
                <div class="sg-color-name">Turquoise</div>
                <div class="sg-color-value">#1abc9c</div>
              </div>
              <div class="sg-color">
                <div class="sg-color-swatch" style="background-color: #2ecc71;"></div>
                <div class="sg-color-name">Emerald</div>
                <div class="sg-color-value">#2ecc71</div>
              </div>
              <div class="sg-color">
                <div class="sg-color-swatch" style="background-color: #3498db;"></div>
                <div class="sg-color-name">Peter River</div>
                <div class="sg-color-value">#3498db</div>
              </div>
              <div class="sg-color">
                <div class="sg-color-swatch" style="background-color: #9b59b6;"></div>
                <div class="sg-color-name">Amethyst</div>
                <div class="sg-color-value">#9b59b6</div>
              </div>
            </div><!--/.sg-color-grid-->
            <div class="sg-color-grid">
              <div class="sg-color">
                <div class="sg-color-swatch" style="background-color: #f1c40f;"></div>
                <div class="sg-color-name">Sun Flower</div>
                <div class="sg-color-value">#f1c40f</div>
              </div>
              <div class="sg-color">
                <div class="sg-color-swatch" style="background-color: #e67e22;"></div>
                <div class="sg-color-name">Carrot</div>
                <div class="sg-color-value">#e67e22</div>
              </div>
              <div class="sg-color">
                <div class="sg-color-swatch" style="background-color: #e74c3c;"></div>
                <div class="sg-color-name">Alizarin</div>
                <div class="sg-color-value">#e74c3c</div>
              </div>
              <div class="sg-color">
                <div class="sg-color-swatch" style="background-color: #c0392b;"></div>
                <div class="sg-color-name">Pomegranate</div>
                <div class="sg-color-value">#c0392b</div>
              </div>
            </div><!--/.sg-color-grid-->
            <div class="sg-color-grid">
              <div class="sg-color">
                <div class="sg-color-swatch" style="background-color: #ecf0f1;"></div>
                <div class="sg-color-name">Clouds</div>
                <div class="sg-color-value">#ecf0f1</div>
              </div>
              <div class="sg-color">
                <div class="sg-color-swatch" style="background-color: #95a5a6;"></div>
                <div class="sg-color-name">Silver</div>
                <div class="sg-color-value">#95a5a6</div>
              </div>
              <div class="sg-color">
                <div class="sg-color-swatch" style="background-color: #697374;"></div>
                <div class="sg-color-name">Concrete</div>
                <div class="sg-color-value">#697374</div>
              </div>
              <div class="sg-color">
                <div class="sg-color-swatch" style="background-color: #111313;"></div>
                <div class="sg-color-name">Obsidian</div>
                <div class="sg-color-value">#111313</div>
              </div>
            </div><!--/.sg-color-grid-->
          </div><!--/.sg-colors-->

          <!-- Manually add your fonts here. -->
          <div class="sg-font-stacks sg-section">
            <h2 id="sg-fontStacks" class="sg-h2">Font Stacks</h2>
            <dl class="sg-font-list">
              <dt>Primary Font:</dt>
              <dd style='font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;'>"HelveticaNeue", Helvetica, Arial, sans-serif;</dd>

              <dt>Primary Font Italic:</dt>
              <dd style='font-family: "HelveticaNeue", Helvetica, Arial, sans-serif; font-style: italic;'>"HelveticaNeue", Helvetica, Arial, sans-serif;</dd>

              <dt>Primary Font Bold:</dt>
              <dd style='font-family: "HelveticaNeue", Helvetica, Arial, sans-serif; font-weight: 800;'>"HelveticaNeue", Helvetica, Arial, sans-serif;</dd>

              <dt>Secondary Font:</dt>
              <dd style='font-family: Georgia, Times, "Times New Roman", serif;'>Georgia, Times, "Times New Roman", serif;</dd>

              <dt>Secondary Font Italic:</dt>
              <dd style='font-family: Georgia, Times, "Times New Roman", serif; font-style: italic;'>Georgia, Times, "Times New Roman", serif;</dd>

              <dt>Secondary Font Bold:</dt>
              <dd style='font-family: Georgia, Times, "Times New Roman", serif; font-weight: 800;'>Georgia, Times, "Times New Roman", serif;</dd>
            </dl>
            <div class="sg-markup-controls"><a class="sg-btn--top" href="#top">Back to Top</a></div>
          </div><!--/.sg-font-stacks-->
        </div><!--/.sg-info-->

        <div class="sg-section-group"><h1 id="sg-markup-base" class="sg-h1 sg-title">base</h1><div class="sg-section-group"><div class="sg-section"><h2 id="sg-markup-base-address-html" class="sg-h2 sg-title">address</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><address>
  Company Name, Inc.<br>
  811 7th Ave, Suite 700<br>
  Manhattan, NY 10019<br>
  USA
</address></div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;address&gt;
  Company Name, Inc.&lt;br&gt;
  811 7th Ave, Suite 700&lt;br&gt;
  Manhattan, NY 10019&lt;br&gt;
  USA
&lt;/address&gt;</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-blockquote-html" class="sg-h2 sg-title">blockquote</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><blockquote>
  <p>Some sort of famous witty quote marked up with a &lt;blockquote> and a child &lt;p> element.</p>
</blockquote>

<blockquote>Even better philosophical quote marked up with just a &lt;blockquote> element.</blockquote></div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;blockquote&gt;
  &lt;p&gt;Some sort of famous witty quote marked up with a &amp;lt;blockquote&gt; and a child &amp;lt;p&gt; element.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;blockquote&gt;Even better philosophical quote marked up with just a &amp;lt;blockquote&gt; element.&lt;/blockquote&gt;</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-details-html" class="sg-h2 sg-title">details</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><details open>
  <summary>More info</summary>
  <div>
    <p>Additional information</p>
    <ul>
      <li>Point 1</li>
      <li>Point 2</li>
    </ul>
  </div>
</details>
<details>
  <summary>More info</summary>
  <div>
    <p>Additional information</p>
    <ul>
      <li>Point 1</li>
      <li>Point 2</li>
    </ul>
  </div>
</details>
<details>
  <summary>More info</summary>
  <div>
    <p>Additional information</p>
    <ul>
      <li>Point 1</li>
      <li>Point 2</li>
    </ul>
  </div>
</details></div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;details open&gt;
  &lt;summary&gt;More info&lt;/summary&gt;
  &lt;div&gt;
    &lt;p&gt;Additional information&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;Point 1&lt;/li&gt;
      &lt;li&gt;Point 2&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/details&gt;
&lt;details&gt;
  &lt;summary&gt;More info&lt;/summary&gt;
  &lt;div&gt;
    &lt;p&gt;Additional information&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;Point 1&lt;/li&gt;
      &lt;li&gt;Point 2&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/details&gt;
&lt;details&gt;
  &lt;summary&gt;More info&lt;/summary&gt;
  &lt;div&gt;
    &lt;p&gt;Additional information&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;Point 1&lt;/li&gt;
      &lt;li&gt;Point 2&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/details&gt;</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-figure-html" class="sg-h2 sg-title">figure</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><figure>
  <img src="http://placehold.it/240x240" alt="Image alt text 1">
  <figcaption>Figcaption content</figcaption>
</figure>

<figure>
  <img src="http://placehold.it/240x240" alt="Image alt text 2">
  <figcaption>
    <h4>Figure Title</h4>
    Figcaption content
  </figcaption>
</figure>
</div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;figure&gt;
  &lt;img src=&quot;http://placehold.it/240x240&quot; alt=&quot;Image alt text 1&quot;&gt;
  &lt;figcaption&gt;Figcaption content&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;figure&gt;
  &lt;img src=&quot;http://placehold.it/240x240&quot; alt=&quot;Image alt text 2&quot;&gt;
  &lt;figcaption&gt;
    &lt;h4&gt;Figure Title&lt;/h4&gt;
    Figcaption content
  &lt;/figcaption&gt;
&lt;/figure&gt;
</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-form-buttons-html" class="sg-h2 sg-title">form buttons</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><form>
  <fieldset>
    <legend>Buttons</legend>
    <p><input type="button" value="Input type button"></p>
    <p><input type="reset" value="Input type reset"></p>
    <p><input type="submit" value="Input type submit"></p>
    <p><input type="submit" value="Input type submit disabled" disabled></p>
    <p><button type="button">Button type button</button></p>
    <p><button type="reset">Button type reset</button></p>
    <p><button type="submit">Button type submit</button></p>
    <p><button type="button" disabled>Button type button disabled</button></p>
    <p><button>Button</button></p>
  </fieldset>
</form>
</div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;form&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Buttons&lt;/legend&gt;
    &lt;p&gt;&lt;input type=&quot;button&quot; value=&quot;Input type button&quot;&gt;&lt;/p&gt;
    &lt;p&gt;&lt;input type=&quot;reset&quot; value=&quot;Input type reset&quot;&gt;&lt;/p&gt;
    &lt;p&gt;&lt;input type=&quot;submit&quot; value=&quot;Input type submit&quot;&gt;&lt;/p&gt;
    &lt;p&gt;&lt;input type=&quot;submit&quot; value=&quot;Input type submit disabled&quot; disabled&gt;&lt;/p&gt;
    &lt;p&gt;&lt;button type=&quot;button&quot;&gt;Button type button&lt;/button&gt;&lt;/p&gt;
    &lt;p&gt;&lt;button type=&quot;reset&quot;&gt;Button type reset&lt;/button&gt;&lt;/p&gt;
    &lt;p&gt;&lt;button type=&quot;submit&quot;&gt;Button type submit&lt;/button&gt;&lt;/p&gt;
    &lt;p&gt;&lt;button type=&quot;button&quot; disabled&gt;Button type button disabled&lt;/button&gt;&lt;/p&gt;
    &lt;p&gt;&lt;button&gt;Button&lt;/button&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;
</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-form-fields-default-html" class="sg-h2 sg-title">form fields default</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><form>
  <fieldset>
    <legend>Form Fields</legend>
    <div><label for="text-input">Text input</label> <input id="text-input" type="text"></div>
    <div><label for="text-input-placeholder">Text input with placeholder</label> <input id="text-input-placeholder" type="text" placeholder="I'm placeholder text"></div>
    <div><label for="readonly-input">Readonly input</label> <input id="readonly-input" type="text" value="Read only text input" readonly></div>
    <div><label for="disabled-input">Disabled input</label> <input id="disabled-input" type="text" value="Disabled text input" disabled></div>
    <div><label for="required-input">Required input <span class="required">*</span></label> <input id="required-input" type="text" required aria-required="true"></div>
    <div><label for="email-input">Email input</label> <input id="email-input" type="email"></div>
    <div><label for="search-input">Search input</label> <input id="search-input" type="search"></div>
    <div><label for="speech-input">Speech recognition input</label> <input id="speech-input" type="text" name="speech" x-webkit-speech=""></div>
    <div><label for="tel-input">Tel input</label> <input id="tel-input" type="tel"></div>
    <div><label for="url-input">URL input</label> <input id="url-input" type="url" placeholder="http://"></div>
    <div><label for="password-input">Password input</label> <input id="password-input" type="password" value="password"></div>
    <div><label for="select-field">Select field</label> <select id="select-field"><option selected="selected">Option 01</option><option>Option 02</option></select></div>
    <div><label for="multiple-select-field">Multiple select field</label><select id="multiple-select-field" multiple size="5"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option><option>Option 6</option><option>Option 7</option><option>Option 8</option><option>Option 9</option><option>Option 10</option></select></div>
    <div><label for="radio-input"><input id="radio-input" type="radio" name="rad"> Radio input</label></div>
    <div><label for="checkbox-input"><input id="checkbox-input" type="checkbox"> Checkbox input</label></div>
    <div><label for="file-input">File input</label> <input id="file-input" type="file"></div>
    <div><label for="textarea">Textarea</label> <textarea id="textarea" cols="30" rows="5" >Textarea text</textarea></div>
    <div><label for="color-input">Color input</label> <input id="color-input" type="color" value="#000000"></div>
    <div><label for="number-input">Number input</label> <input id="number-input" type="number" value="5" min="0" max="10"></div>
    <div><label for="range-input">Range input</label> <input id="range-input" type="range" value="0" min="0" max="100"> <output>0</output>
    <script>
      if (document.querySelector) {
        document.querySelector('#range-input').onchange = function(e) {
          e.target.nextElementSibling.innerText = e.target.value;
        }
      }
    </script>
    </div>
    <div><label for="date-input">Date input</label> <input id="date-input" type="date"></div>
    <div><label for="month-input">Month input</label> <input id="month-input" type="month"></div>
    <div><label for="week-input">Week input</label> <input id="week-input" type="week"></div>
    <div><label for="time-input">Time input</label> <input id="time-input" type="time"></div>
    <div><label for="datetime-input">Datetime input</label> <input id="datetime-input" type="datetime"></div>
    <div><label for="datetime-local-input">Datetime-local input</label> <input id="datetime-local-input" type="datetime-local"></div>
  </fieldset>
  <input type="submit" value="Submit form">
</form>
</div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;form&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Form Fields&lt;/legend&gt;
    &lt;div&gt;&lt;label for=&quot;text-input&quot;&gt;Text input&lt;/label&gt; &lt;input id=&quot;text-input&quot; type=&quot;text&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;text-input-placeholder&quot;&gt;Text input with placeholder&lt;/label&gt; &lt;input id=&quot;text-input-placeholder&quot; type=&quot;text&quot; placeholder=&quot;I'm placeholder text&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;readonly-input&quot;&gt;Readonly input&lt;/label&gt; &lt;input id=&quot;readonly-input&quot; type=&quot;text&quot; value=&quot;Read only text input&quot; readonly&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;disabled-input&quot;&gt;Disabled input&lt;/label&gt; &lt;input id=&quot;disabled-input&quot; type=&quot;text&quot; value=&quot;Disabled text input&quot; disabled&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;required-input&quot;&gt;Required input &lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt; &lt;input id=&quot;required-input&quot; type=&quot;text&quot; required aria-required=&quot;true&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;email-input&quot;&gt;Email input&lt;/label&gt; &lt;input id=&quot;email-input&quot; type=&quot;email&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;search-input&quot;&gt;Search input&lt;/label&gt; &lt;input id=&quot;search-input&quot; type=&quot;search&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;speech-input&quot;&gt;Speech recognition input&lt;/label&gt; &lt;input id=&quot;speech-input&quot; type=&quot;text&quot; name=&quot;speech&quot; x-webkit-speech=&quot;&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;tel-input&quot;&gt;Tel input&lt;/label&gt; &lt;input id=&quot;tel-input&quot; type=&quot;tel&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;url-input&quot;&gt;URL input&lt;/label&gt; &lt;input id=&quot;url-input&quot; type=&quot;url&quot; placeholder=&quot;http://&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;password-input&quot;&gt;Password input&lt;/label&gt; &lt;input id=&quot;password-input&quot; type=&quot;password&quot; value=&quot;password&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;select-field&quot;&gt;Select field&lt;/label&gt; &lt;select id=&quot;select-field&quot;&gt;&lt;option selected=&quot;selected&quot;&gt;Option 01&lt;/option&gt;&lt;option&gt;Option 02&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;multiple-select-field&quot;&gt;Multiple select field&lt;/label&gt;&lt;select id=&quot;multiple-select-field&quot; multiple size=&quot;5&quot;&gt;&lt;option&gt;Option 1&lt;/option&gt;&lt;option&gt;Option 2&lt;/option&gt;&lt;option&gt;Option 3&lt;/option&gt;&lt;option&gt;Option 4&lt;/option&gt;&lt;option&gt;Option 5&lt;/option&gt;&lt;option&gt;Option 6&lt;/option&gt;&lt;option&gt;Option 7&lt;/option&gt;&lt;option&gt;Option 8&lt;/option&gt;&lt;option&gt;Option 9&lt;/option&gt;&lt;option&gt;Option 10&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;radio-input&quot;&gt;&lt;input id=&quot;radio-input&quot; type=&quot;radio&quot; name=&quot;rad&quot;&gt; Radio input&lt;/label&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;checkbox-input&quot;&gt;&lt;input id=&quot;checkbox-input&quot; type=&quot;checkbox&quot;&gt; Checkbox input&lt;/label&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;file-input&quot;&gt;File input&lt;/label&gt; &lt;input id=&quot;file-input&quot; type=&quot;file&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;textarea&quot;&gt;Textarea&lt;/label&gt; &lt;textarea id=&quot;textarea&quot; cols=&quot;30&quot; rows=&quot;5&quot; &gt;Textarea text&lt;/textarea&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;color-input&quot;&gt;Color input&lt;/label&gt; &lt;input id=&quot;color-input&quot; type=&quot;color&quot; value=&quot;#000000&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;number-input&quot;&gt;Number input&lt;/label&gt; &lt;input id=&quot;number-input&quot; type=&quot;number&quot; value=&quot;5&quot; min=&quot;0&quot; max=&quot;10&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;range-input&quot;&gt;Range input&lt;/label&gt; &lt;input id=&quot;range-input&quot; type=&quot;range&quot; value=&quot;0&quot; min=&quot;0&quot; max=&quot;100&quot;&gt; &lt;output&gt;0&lt;/output&gt;
    &lt;script&gt;
      if (document.querySelector) {
        document.querySelector('#range-input').onchange = function(e) {
          e.target.nextElementSibling.innerText = e.target.value;
        }
      }
    &lt;/script&gt;
    &lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;date-input&quot;&gt;Date input&lt;/label&gt; &lt;input id=&quot;date-input&quot; type=&quot;date&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;month-input&quot;&gt;Month input&lt;/label&gt; &lt;input id=&quot;month-input&quot; type=&quot;month&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;week-input&quot;&gt;Week input&lt;/label&gt; &lt;input id=&quot;week-input&quot; type=&quot;week&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;time-input&quot;&gt;Time input&lt;/label&gt; &lt;input id=&quot;time-input&quot; type=&quot;time&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;datetime-input&quot;&gt;Datetime input&lt;/label&gt; &lt;input id=&quot;datetime-input&quot; type=&quot;datetime&quot;&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;datetime-local-input&quot;&gt;Datetime-local input&lt;/label&gt; &lt;input id=&quot;datetime-local-input&quot; type=&quot;datetime-local&quot;&gt;&lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;input type=&quot;submit&quot; value=&quot;Submit form&quot;&gt;
&lt;/form&gt;
</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-form-fields-disabled-html" class="sg-h2 sg-title">form fields disabled</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><form>
  <fieldset>
    <legend>Disabled Form Fields</legend>
    <div><label for="text-input-disabled">Disabled text input</label> <input id="text-input-disabled" type="text" value="Disabled text input" disabled></div>
    <div><label for="select-field-disabled">Disabled select field</label> <select id="select-field-disabled" disabled><option selected="selected">Option 01</option><option>Option 02</option></select></div>
    <div><label for="file-input-disabled">Disabled file input</label> <input id="file-input-disabled" type="file" disabled></div>
    <div><label for="radio-input-disabled"><input id="radio-input-disabled" type="radio" name="rad" disabled> Disabled radio input</label></div>
    <div><label for="checkbox-input-disabled"><input id="checkbox-input-disabled" type="checkbox" disabled> Disabled checkbox input</label></div>
    <div><label for="color-input-disabled">Disabled color input</label> <input id="color-input-disabled" type="color" value="#000000" disabled></div>
    <div><label for="range-input-disabled">Disabled range input</label> <input id="range-input-disabled" type="range" disabled></div>
    <div><label for="number-input-disabled">Disabled number input</label> <input id="number-input-disabled" type="number" value="5" min="0" max="10" disabled></div>
    <div><label for="textarea-disabled">Disabled textarea</label> <textarea id="textarea-disabled" cols="30" rows="5" disabled>Textarea text</textarea></div>
  </fieldset>
  <input type="submit" value="Submit form">
</form>
</div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;form&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Disabled Form Fields&lt;/legend&gt;
    &lt;div&gt;&lt;label for=&quot;text-input-disabled&quot;&gt;Disabled text input&lt;/label&gt; &lt;input id=&quot;text-input-disabled&quot; type=&quot;text&quot; value=&quot;Disabled text input&quot; disabled&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;select-field-disabled&quot;&gt;Disabled select field&lt;/label&gt; &lt;select id=&quot;select-field-disabled&quot; disabled&gt;&lt;option selected=&quot;selected&quot;&gt;Option 01&lt;/option&gt;&lt;option&gt;Option 02&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;file-input-disabled&quot;&gt;Disabled file input&lt;/label&gt; &lt;input id=&quot;file-input-disabled&quot; type=&quot;file&quot; disabled&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;radio-input-disabled&quot;&gt;&lt;input id=&quot;radio-input-disabled&quot; type=&quot;radio&quot; name=&quot;rad&quot; disabled&gt; Disabled radio input&lt;/label&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;checkbox-input-disabled&quot;&gt;&lt;input id=&quot;checkbox-input-disabled&quot; type=&quot;checkbox&quot; disabled&gt; Disabled checkbox input&lt;/label&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;color-input-disabled&quot;&gt;Disabled color input&lt;/label&gt; &lt;input id=&quot;color-input-disabled&quot; type=&quot;color&quot; value=&quot;#000000&quot; disabled&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;range-input-disabled&quot;&gt;Disabled range input&lt;/label&gt; &lt;input id=&quot;range-input-disabled&quot; type=&quot;range&quot; disabled&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;number-input-disabled&quot;&gt;Disabled number input&lt;/label&gt; &lt;input id=&quot;number-input-disabled&quot; type=&quot;number&quot; value=&quot;5&quot; min=&quot;0&quot; max=&quot;10&quot; disabled&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;textarea-disabled&quot;&gt;Disabled textarea&lt;/label&gt; &lt;textarea id=&quot;textarea-disabled&quot; cols=&quot;30&quot; rows=&quot;5&quot; disabled&gt;Textarea text&lt;/textarea&gt;&lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;input type=&quot;submit&quot; value=&quot;Submit form&quot;&gt;
&lt;/form&gt;
</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-form-fields-readonly-html" class="sg-h2 sg-title">form fields readonly</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><form>
  <fieldset>
    <legend>Readonly Form Fields</legend>
    <div><label for="text-input-readonly">Readonly text input</label> <input id="text-input-readonly" type="text" value="Readonly text input" readonly></div>
    <div><label for="color-input-readonly">Readonly color input</label> <input id="color-input-readonly" type="color" value="#000000" readonly></div>
    <div><label for="range-input-readonly">Readonly range input</label> <input id="range-input-readonly" type="range" readonly></div>
    <div><label for="number-input-readonly">Readonly number input</label> <input id="number-input-readonly" type="number" value="5" min="0" max="10" readonly></div>
    <div><label for="textarea-readonly">Readonly textarea</label> <textarea id="textarea-readonly" cols="30" rows="5" readonly>Textarea text</textarea></div>
  </fieldset>
  <input type="submit" value="Submit form">
</form>
</div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;form&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Readonly Form Fields&lt;/legend&gt;
    &lt;div&gt;&lt;label for=&quot;text-input-readonly&quot;&gt;Readonly text input&lt;/label&gt; &lt;input id=&quot;text-input-readonly&quot; type=&quot;text&quot; value=&quot;Readonly text input&quot; readonly&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;color-input-readonly&quot;&gt;Readonly color input&lt;/label&gt; &lt;input id=&quot;color-input-readonly&quot; type=&quot;color&quot; value=&quot;#000000&quot; readonly&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;range-input-readonly&quot;&gt;Readonly range input&lt;/label&gt; &lt;input id=&quot;range-input-readonly&quot; type=&quot;range&quot; readonly&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;number-input-readonly&quot;&gt;Readonly number input&lt;/label&gt; &lt;input id=&quot;number-input-readonly&quot; type=&quot;number&quot; value=&quot;5&quot; min=&quot;0&quot; max=&quot;10&quot; readonly&gt;&lt;/div&gt;
    &lt;div&gt;&lt;label for=&quot;textarea-readonly&quot;&gt;Readonly textarea&lt;/label&gt; &lt;textarea id=&quot;textarea-readonly&quot; cols=&quot;30&quot; rows=&quot;5&quot; readonly&gt;Textarea text&lt;/textarea&gt;&lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;input type=&quot;submit&quot; value=&quot;Submit form&quot;&gt;
&lt;/form&gt;
</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-form-fields-with-datalist-html" class="sg-h2 sg-title">form fields with datalist</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><form>
  <fieldset>
    <legend>Form Fields With Datalist</legend>
    <div>
      <label for="text-input-datalist">Text input with datalist</label>
      <input id="text-input-datalist" type="text" value="" list="fav-color" placeholder="Type your favorite color" />
      <datalist id="fav-color">
        <option value="Red">Red</option>
        <option value="Orange">Orange</option>
        <option value="Yellow">Yellow</option>
        <option value="Green">Green</option>
        <option value="Blue">Blue</option>
        <option value="Purple">Purple</option>
      </datalist>
    </div>
    <div>
      <label for="range-input-datalist">Range input with datalist</label>
      <input id="range-input-datalist" type="range" value="0" min="0" max="100" list="number" />
      <output>0</output>
      <datalist id="number">
        <option>25</option>
        <option>50</option>
        <option>75</option>
      </datalist>
      <script>
      if (document.querySelector) {
        document.querySelector('#range-input-datalist').onchange = function(e) {
          e.target.nextElementSibling.innerText = e.target.value;
        }
      }
    </script>
    </div>
    <div>
      <label for="color-input-datalist">Color input with datalist</label>
      <input id="color-input-datalist" type="color" value="#000000" list="color" />
      <datalist id="color">
        <option>#ff0000</option>
        <option>#0000ff</option>
        <option>#00ff00</option>
        <option>#ffff00</option>
        <option>#00ffff</option>
      </datalist>
    </div>
    <div>
      <label for="date-input-datalist">Date input with datalist</label>
      <input id="date-input-datalist" type="date" list="days" />
      <datalist id="days">
        <option label="Independence Day">2013-07-04</option>
        <option label="Labor Day">2013-09-02</option>
        <option label="Columbus Day">2013-10-14</option>
      </datalist>
    </div>
    <div>
      <label for="time-input-datalist">Time input with datalist</label>
      <input id="time-input-datalist" type="time" list="times" />
      <datalist id="times">
        <option label="Midnight">00:00</option>
        <option>06:00</option>
        <option label="Noon">12:00</option>
        <option>18:00</option>
      </datalist>
    </div>
    <div>
      <label for="datetime-local-input-datalist">Datetime-local input with datalist</label>
      <input id="datetime-local-input-datalist" type="datetime-local" list="datetime-locals" />
      <datalist id="datetime-locals">
        <option label="Santa Visit">2012-12-24T23:59</option>
        <option label="Chrismas party">2012-12-25T18:00</option>
        <option>2012-12-30T00:00</option>
        <option label="Happy New Year">2013-01-01T00:00</option>
      </datalist>
    </div>
    <div>
      <label for="month-input-datalist">Month input with datalist</label>
      <input id="month-input-datalist" type="month" list="months" />
      <datalist id="months">
        <option label="End of last century">2000-12</option>
        <option>2010-01</option>
        <option>2011-01</option>
        <option>2012-01</option>
        <option>2013-01</option>
      </datalist>
    </div>
    <div>
      <label for="week-input-datalist">Week input with datalist</label>
      <input id="week-input-datalist" type="week" list="weeks" />
      <datalist id="weeks">
        <option label="First week of 2013">2013-W01</option>
        <option label="Second week of 2013">2013-W02</option>
        <option label="13th week of 2013">2013-W13</option>
        <option label="The last week of 2013">2013-W52</option>
      </datalist>
    </div>
  </fieldset>
  <input type="submit" value="Submit form">
</form>
</div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;form&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Form Fields With Datalist&lt;/legend&gt;
    &lt;div&gt;
      &lt;label for=&quot;text-input-datalist&quot;&gt;Text input with datalist&lt;/label&gt;
      &lt;input id=&quot;text-input-datalist&quot; type=&quot;text&quot; value=&quot;&quot; list=&quot;fav-color&quot; placeholder=&quot;Type your favorite color&quot; /&gt;
      &lt;datalist id=&quot;fav-color&quot;&gt;
        &lt;option value=&quot;Red&quot;&gt;Red&lt;/option&gt;
        &lt;option value=&quot;Orange&quot;&gt;Orange&lt;/option&gt;
        &lt;option value=&quot;Yellow&quot;&gt;Yellow&lt;/option&gt;
        &lt;option value=&quot;Green&quot;&gt;Green&lt;/option&gt;
        &lt;option value=&quot;Blue&quot;&gt;Blue&lt;/option&gt;
        &lt;option value=&quot;Purple&quot;&gt;Purple&lt;/option&gt;
      &lt;/datalist&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for=&quot;range-input-datalist&quot;&gt;Range input with datalist&lt;/label&gt;
      &lt;input id=&quot;range-input-datalist&quot; type=&quot;range&quot; value=&quot;0&quot; min=&quot;0&quot; max=&quot;100&quot; list=&quot;number&quot; /&gt;
      &lt;output&gt;0&lt;/output&gt;
      &lt;datalist id=&quot;number&quot;&gt;
        &lt;option&gt;25&lt;/option&gt;
        &lt;option&gt;50&lt;/option&gt;
        &lt;option&gt;75&lt;/option&gt;
      &lt;/datalist&gt;
      &lt;script&gt;
      if (document.querySelector) {
        document.querySelector('#range-input-datalist').onchange = function(e) {
          e.target.nextElementSibling.innerText = e.target.value;
        }
      }
    &lt;/script&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for=&quot;color-input-datalist&quot;&gt;Color input with datalist&lt;/label&gt;
      &lt;input id=&quot;color-input-datalist&quot; type=&quot;color&quot; value=&quot;#000000&quot; list=&quot;color&quot; /&gt;
      &lt;datalist id=&quot;color&quot;&gt;
        &lt;option&gt;#ff0000&lt;/option&gt;
        &lt;option&gt;#0000ff&lt;/option&gt;
        &lt;option&gt;#00ff00&lt;/option&gt;
        &lt;option&gt;#ffff00&lt;/option&gt;
        &lt;option&gt;#00ffff&lt;/option&gt;
      &lt;/datalist&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for=&quot;date-input-datalist&quot;&gt;Date input with datalist&lt;/label&gt;
      &lt;input id=&quot;date-input-datalist&quot; type=&quot;date&quot; list=&quot;days&quot; /&gt;
      &lt;datalist id=&quot;days&quot;&gt;
        &lt;option label=&quot;Independence Day&quot;&gt;2013-07-04&lt;/option&gt;
        &lt;option label=&quot;Labor Day&quot;&gt;2013-09-02&lt;/option&gt;
        &lt;option label=&quot;Columbus Day&quot;&gt;2013-10-14&lt;/option&gt;
      &lt;/datalist&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for=&quot;time-input-datalist&quot;&gt;Time input with datalist&lt;/label&gt;
      &lt;input id=&quot;time-input-datalist&quot; type=&quot;time&quot; list=&quot;times&quot; /&gt;
      &lt;datalist id=&quot;times&quot;&gt;
        &lt;option label=&quot;Midnight&quot;&gt;00:00&lt;/option&gt;
        &lt;option&gt;06:00&lt;/option&gt;
        &lt;option label=&quot;Noon&quot;&gt;12:00&lt;/option&gt;
        &lt;option&gt;18:00&lt;/option&gt;
      &lt;/datalist&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for=&quot;datetime-local-input-datalist&quot;&gt;Datetime-local input with datalist&lt;/label&gt;
      &lt;input id=&quot;datetime-local-input-datalist&quot; type=&quot;datetime-local&quot; list=&quot;datetime-locals&quot; /&gt;
      &lt;datalist id=&quot;datetime-locals&quot;&gt;
        &lt;option label=&quot;Santa Visit&quot;&gt;2012-12-24T23:59&lt;/option&gt;
        &lt;option label=&quot;Chrismas party&quot;&gt;2012-12-25T18:00&lt;/option&gt;
        &lt;option&gt;2012-12-30T00:00&lt;/option&gt;
        &lt;option label=&quot;Happy New Year&quot;&gt;2013-01-01T00:00&lt;/option&gt;
      &lt;/datalist&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for=&quot;month-input-datalist&quot;&gt;Month input with datalist&lt;/label&gt;
      &lt;input id=&quot;month-input-datalist&quot; type=&quot;month&quot; list=&quot;months&quot; /&gt;
      &lt;datalist id=&quot;months&quot;&gt;
        &lt;option label=&quot;End of last century&quot;&gt;2000-12&lt;/option&gt;
        &lt;option&gt;2010-01&lt;/option&gt;
        &lt;option&gt;2011-01&lt;/option&gt;
        &lt;option&gt;2012-01&lt;/option&gt;
        &lt;option&gt;2013-01&lt;/option&gt;
      &lt;/datalist&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for=&quot;week-input-datalist&quot;&gt;Week input with datalist&lt;/label&gt;
      &lt;input id=&quot;week-input-datalist&quot; type=&quot;week&quot; list=&quot;weeks&quot; /&gt;
      &lt;datalist id=&quot;weeks&quot;&gt;
        &lt;option label=&quot;First week of 2013&quot;&gt;2013-W01&lt;/option&gt;
        &lt;option label=&quot;Second week of 2013&quot;&gt;2013-W02&lt;/option&gt;
        &lt;option label=&quot;13th week of 2013&quot;&gt;2013-W13&lt;/option&gt;
        &lt;option label=&quot;The last week of 2013&quot;&gt;2013-W52&lt;/option&gt;
      &lt;/datalist&gt;
    &lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;input type=&quot;submit&quot; value=&quot;Submit form&quot;&gt;
&lt;/form&gt;
</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-form-fieldset-html" class="sg-h2 sg-title">form fieldset</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><form>
  <fieldset>
    <legend>Fieldset with legend</legend>
    <p><label for="fieldset-text-input1">Text Input</label> <input id="fieldset-text-input1" type="text"></p>
  </fieldset>
  <input type="submit" value="Submit form">
</form>
</div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;form&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Fieldset with legend&lt;/legend&gt;
    &lt;p&gt;&lt;label for=&quot;fieldset-text-input1&quot;&gt;Text Input&lt;/label&gt; &lt;input id=&quot;fieldset-text-input1&quot; type=&quot;text&quot;&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;input type=&quot;submit&quot; value=&quot;Submit form&quot;&gt;
&lt;/form&gt;
</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-headings-1-html" class="sg-h2 sg-title">headings 1</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><h1>Heading 1 with <small>small text</small> and a <a href="#">link</a></h1>
<h2>Heading 2 with <small>small text</small> and a <a href="#">link</a></h2>
<h3>Heading 3 with <small>small text</small> and a <a href="#">link</a></h3>
<h4>Heading 4 with <small>small text</small> and a <a href="#">link</a></h4>
<h5>Heading 5 with <small>small text</small> and a <a href="#">link</a></h5>
<h6>Heading 6 with <small>small text</small> and a <a href="#">link</a></h6></div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;h1&gt;Heading 1 with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h1&gt;
&lt;h2&gt;Heading 2 with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h2&gt;
&lt;h3&gt;Heading 3 with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h3&gt;
&lt;h4&gt;Heading 4 with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h4&gt;
&lt;h5&gt;Heading 5 with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h5&gt;
&lt;h6&gt;Heading 6 with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h6&gt;</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-headings-2-html" class="sg-h2 sg-title">headings 2</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><article>
  <h1>Heading 1 (in article) with <small>small text</small> and a <a href="#">link</a></h1>
  <h2>Heading 2 (in article) with <small>small text</small> and a <a href="#">link</a></h2>
  <h3>Heading 3 (in article) with <small>small text</small> and a <a href="#">link</a></h3>
  <h4>Heading 4 (in article) with <small>small text</small> and a <a href="#">link</a></h4>
  <h5>Heading 5 (in article) with <small>small text</small> and a <a href="#">link</a></h5>
  <h6>Heading 6 (in article) with <small>small text</small> and a <a href="#">link</a></h6>
</article></div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;article&gt;
  &lt;h1&gt;Heading 1 (in article) with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h1&gt;
  &lt;h2&gt;Heading 2 (in article) with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h2&gt;
  &lt;h3&gt;Heading 3 (in article) with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h3&gt;
  &lt;h4&gt;Heading 4 (in article) with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h4&gt;
  &lt;h5&gt;Heading 5 (in article) with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h5&gt;
  &lt;h6&gt;Heading 6 (in article) with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h6&gt;
&lt;/article&gt;</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-headings-3-html" class="sg-h2 sg-title">headings 3</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><section>
  <h1>Heading 1 (in section) with <small>small text</small> and a <a href="#">link</a></h1>
  <h2>Heading 2 (in section) with <small>small text</small> and a <a href="#">link</a></h2>
  <h3>Heading 3 (in section) with <small>small text</small> and a <a href="#">link</a></h3>
  <h4>Heading 4 (in section) with <small>small text</small> and a <a href="#">link</a></h4>
  <h5>Heading 5 (in section) with <small>small text</small> and a <a href="#">link</a></h5>
  <h6>Heading 6 (in section) with <small>small text</small> and a <a href="#">link</a></h6>
</section></div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;section&gt;
  &lt;h1&gt;Heading 1 (in section) with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h1&gt;
  &lt;h2&gt;Heading 2 (in section) with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h2&gt;
  &lt;h3&gt;Heading 3 (in section) with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h3&gt;
  &lt;h4&gt;Heading 4 (in section) with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h4&gt;
  &lt;h5&gt;Heading 5 (in section) with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h5&gt;
  &lt;h6&gt;Heading 6 (in section) with &lt;small&gt;small text&lt;/small&gt; and a &lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;&lt;/h6&gt;
&lt;/section&gt;</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-hr-html" class="sg-h2 sg-title">hr</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><hr></div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;hr&gt;</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-list-definition-html" class="sg-h2 sg-title">list definition</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><dl>
  <dt>Description name</dt>
  <dd>Description value</dd>
  <dt>Description name</dt>
  <dd>Description value</dd>
  <dd>Description value</dd>
  <dt>Description name</dt>
  <dt>Description name</dt>
  <dd>Description value</dd>
</dl></div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;dl&gt;
  &lt;dt&gt;Description name&lt;/dt&gt;
  &lt;dd&gt;Description value&lt;/dd&gt;
  &lt;dt&gt;Description name&lt;/dt&gt;
  &lt;dd&gt;Description value&lt;/dd&gt;
  &lt;dd&gt;Description value&lt;/dd&gt;
  &lt;dt&gt;Description name&lt;/dt&gt;
  &lt;dt&gt;Description name&lt;/dt&gt;
  &lt;dd&gt;Description value&lt;/dd&gt;
&lt;/dl&gt;</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-list-ordered-html" class="sg-h2 sg-title">list ordered</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><ol>
  <li>list item 1</li>
  <li>list item 1
    <ol>
      <li>list item 2</li>
      <li>list item 2
        <ol>
          <li>list item 3</li>
          <li>list item 3</li>
        </ol>
      </li>
      <li>list item 2</li>
      <li>list item 2</li>
    </ol>
  </li>
  <li>list item 1</li>
  <li>list item 1</li>
</ol></div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;ol&gt;
  &lt;li&gt;list item 1&lt;/li&gt;
  &lt;li&gt;list item 1
    &lt;ol&gt;
      &lt;li&gt;list item 2&lt;/li&gt;
      &lt;li&gt;list item 2
        &lt;ol&gt;
          &lt;li&gt;list item 3&lt;/li&gt;
          &lt;li&gt;list item 3&lt;/li&gt;
        &lt;/ol&gt;
      &lt;/li&gt;
      &lt;li&gt;list item 2&lt;/li&gt;
      &lt;li&gt;list item 2&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
  &lt;li&gt;list item 1&lt;/li&gt;
  &lt;li&gt;list item 1&lt;/li&gt;
&lt;/ol&gt;</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-list-unordered-html" class="sg-h2 sg-title">list unordered</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><ul>
  <li>list item 1</li>
  <li>list item 1
    <ul>
      <li>list item 2</li>
      <li>list item 2
        <ul>
          <li>list item 3</li>
          <li>list item 3</li>
        </ul>
      </li>
      <li>list item 2</li>
      <li>list item 2</li>
    </ul>
  </li>
  <li>list item 1</li>
  <li>list item 1</li>
</ul></div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;ul&gt;
  &lt;li&gt;list item 1&lt;/li&gt;
  &lt;li&gt;list item 1
    &lt;ul&gt;
      &lt;li&gt;list item 2&lt;/li&gt;
      &lt;li&gt;list item 2
        &lt;ul&gt;
          &lt;li&gt;list item 3&lt;/li&gt;
          &lt;li&gt;list item 3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;list item 2&lt;/li&gt;
      &lt;li&gt;list item 2&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;list item 1&lt;/li&gt;
  &lt;li&gt;list item 1&lt;/li&gt;
&lt;/ul&gt;</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-media-html" class="sg-h2 sg-title">media</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><h3>Default Image</h3>
<img src="http://placehold.it/240x240" alt="Image alt text 3">

<h3>Linked Image</h3>
<a href="#"><img src="http://placehold.it/240x240" alt="Image alt text 4"></a>

<h3>Missing Image</h3>
<img alt="This is an example of a missing image">

<h3>Picture</h3>
<picture>
  <source media="(min-width: 60em)" srcset="http://placehold.it/600x600">
  <source media="(min-width: 40em)" srcset="http://placehold.it/300x300">
  <source srcset="http://placehold.it/150x150">
  <img src="http://placehold.it/150x150" alt="Image alt text 5">
</picture>

<h3>Svg</h3>
<svg width="200px" height="200px">
  <circle cx="100" cy="100" r="100" fill="#ff0000" />
</svg>


<h3>Video</h3>
<div class="sg-video">
  <video id="video1" controls preload poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
    <source id="mp4" src="http://media.w3.org/2010/05/bunny/trailer.mp4" type="video/mp4">
    <source id="ogv" src="http://media.w3.org/2010/05/bunny/trailer.ogv" type="video/ogg">
    <p>Your user agent does not support the HTML5 Video element.</p>
  </video>
  <label class="sg-visually-hidden" for="video1">Video of Big Buck Bunny</label>
</div>

<h3>Missing Video</h3>
<video id="video2" controls></video>
<label class="sg-visually-hidden" for="video2">Missing video</label>


<h3>Audio</h3>
<audio controls>
  <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4" type='audio/mp4'>
  <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga" type='audio/ogg; codecs=vorbis'>
  <p>Your user agent does not support the HTML5 Audio element.</p>
</audio>

<h3>Missing Audio</h3>
<audio controls></audio>
</div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;h3&gt;Default Image&lt;/h3&gt;
&lt;img src=&quot;http://placehold.it/240x240&quot; alt=&quot;Image alt text 3&quot;&gt;

&lt;h3&gt;Linked Image&lt;/h3&gt;
&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;http://placehold.it/240x240&quot; alt=&quot;Image alt text 4&quot;&gt;&lt;/a&gt;

&lt;h3&gt;Missing Image&lt;/h3&gt;
&lt;img alt=&quot;This is an example of a missing image&quot;&gt;

&lt;h3&gt;Picture&lt;/h3&gt;
&lt;picture&gt;
  &lt;source media=&quot;(min-width: 60em)&quot; srcset=&quot;http://placehold.it/600x600&quot;&gt;
  &lt;source media=&quot;(min-width: 40em)&quot; srcset=&quot;http://placehold.it/300x300&quot;&gt;
  &lt;source srcset=&quot;http://placehold.it/150x150&quot;&gt;
  &lt;img src=&quot;http://placehold.it/150x150&quot; alt=&quot;Image alt text 5&quot;&gt;
&lt;/picture&gt;

&lt;h3&gt;Svg&lt;/h3&gt;
&lt;svg width=&quot;200px&quot; height=&quot;200px&quot;&gt;
  &lt;circle cx=&quot;100&quot; cy=&quot;100&quot; r=&quot;100&quot; fill=&quot;#ff0000&quot; /&gt;
&lt;/svg&gt;


&lt;h3&gt;Video&lt;/h3&gt;
&lt;div class=&quot;sg-video&quot;&gt;
  &lt;video id=&quot;video1&quot; controls preload poster=&quot;http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg&quot; width=&quot;640&quot; height=&quot;360&quot;&gt;
    &lt;source id=&quot;mp4&quot; src=&quot;http://media.w3.org/2010/05/bunny/trailer.mp4&quot; type=&quot;video/mp4&quot;&gt;
    &lt;source id=&quot;ogv&quot; src=&quot;http://media.w3.org/2010/05/bunny/trailer.ogv&quot; type=&quot;video/ogg&quot;&gt;
    &lt;p&gt;Your user agent does not support the HTML5 Video element.&lt;/p&gt;
  &lt;/video&gt;
  &lt;label class=&quot;sg-visually-hidden&quot; for=&quot;video1&quot;&gt;Video of Big Buck Bunny&lt;/label&gt;
&lt;/div&gt;

&lt;h3&gt;Missing Video&lt;/h3&gt;
&lt;video id=&quot;video2&quot; controls&gt;&lt;/video&gt;
&lt;label class=&quot;sg-visually-hidden&quot; for=&quot;video2&quot;&gt;Missing video&lt;/label&gt;


&lt;h3&gt;Audio&lt;/h3&gt;
&lt;audio controls&gt;
  &lt;source src=&quot;http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4&quot; type='audio/mp4'&gt;
  &lt;source src=&quot;http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga&quot; type='audio/ogg; codecs=vorbis'&gt;
  &lt;p&gt;Your user agent does not support the HTML5 Audio element.&lt;/p&gt;
&lt;/audio&gt;

&lt;h3&gt;Missing Audio&lt;/h3&gt;
&lt;audio controls&gt;&lt;/audio&gt;
</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-meter-and-progress-html" class="sg-h2 sg-title">meter and progress</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><h3>Meter</h3>
<p><meter value="100" max="100" low="70" high="90">100%</meter> A meter displaying 100%.</p>
<p><meter value="85" max="100" low="70" high="90">85%</meter> A meter displaying 85%.</p>
<p><meter value="50" max="100" low="70" high="90">50%</meter> A meter displaying 50%.</p>
<p><meter value="0" max="100" low="70" high="90">0%</meter> A meter displaying 0%.</p>

<h3>Progress</h3>
<p><progress value="100" max="100">100%</progress> A progress displaying 100%.</p>
<p><progress value="85" max="100">85%</progress> A progress displaying 85%.</p>
<p><progress value="50" max="100">50%</progress> A progress displaying 50%.</p>
<p><progress value="0" max="100">0%</progress> A progress displaying 0%.</p></div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;h3&gt;Meter&lt;/h3&gt;
&lt;p&gt;&lt;meter value=&quot;100&quot; max=&quot;100&quot; low=&quot;70&quot; high=&quot;90&quot;&gt;100%&lt;/meter&gt; A meter displaying 100%.&lt;/p&gt;
&lt;p&gt;&lt;meter value=&quot;85&quot; max=&quot;100&quot; low=&quot;70&quot; high=&quot;90&quot;&gt;85%&lt;/meter&gt; A meter displaying 85%.&lt;/p&gt;
&lt;p&gt;&lt;meter value=&quot;50&quot; max=&quot;100&quot; low=&quot;70&quot; high=&quot;90&quot;&gt;50%&lt;/meter&gt; A meter displaying 50%.&lt;/p&gt;
&lt;p&gt;&lt;meter value=&quot;0&quot; max=&quot;100&quot; low=&quot;70&quot; high=&quot;90&quot;&gt;0%&lt;/meter&gt; A meter displaying 0%.&lt;/p&gt;

&lt;h3&gt;Progress&lt;/h3&gt;
&lt;p&gt;&lt;progress value=&quot;100&quot; max=&quot;100&quot;&gt;100%&lt;/progress&gt; A progress displaying 100%.&lt;/p&gt;
&lt;p&gt;&lt;progress value=&quot;85&quot; max=&quot;100&quot;&gt;85%&lt;/progress&gt; A progress displaying 85%.&lt;/p&gt;
&lt;p&gt;&lt;progress value=&quot;50&quot; max=&quot;100&quot;&gt;50%&lt;/progress&gt; A progress displaying 50%.&lt;/p&gt;
&lt;p&gt;&lt;progress value=&quot;0&quot; max=&quot;100&quot;&gt;0%&lt;/progress&gt; A progress displaying 0%.&lt;/p&gt;</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-preformated-text-html" class="sg-h2 sg-title">preformated text</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><pre>
P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
</pre>

<h3>Pre Code</h3>
<pre><code>&lt;html>
  &lt;head>
  &lt;/head>
  &lt;body>
      &lt;div class="main"> &lt;div>
  &lt;/body>
&lt;/html></code></pre>
</div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;pre&gt;
P R E F O R M A T T E D T E X T
! &quot; # $ % &amp;amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &amp;lt; = &amp;gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
&lt;/pre&gt;

&lt;h3&gt;Pre Code&lt;/h3&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;html&gt;
  &amp;lt;head&gt;
  &amp;lt;/head&gt;
  &amp;lt;body&gt;
      &amp;lt;div class=&quot;main&quot;&gt; &amp;lt;div&gt;
  &amp;lt;/body&gt;
&amp;lt;/html&gt;&lt;/code&gt;&lt;/pre&gt;
</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-sample-content-block-html" class="sg-h2 sg-title">sample content block</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><h1>Hello World</h1>

<p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<ul>
  <li>In voluptate velit esse cillum</li>
  <li>In voluptate velit esse cillum</li>
  <li>In voluptate velit esse cillum</li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;h1&gt;Hello World&lt;/h1&gt;

&lt;p&gt;Lorem ipsum dolor sit amet, &lt;a href=&quot;#&quot;&gt;consectetur&lt;/a&gt; adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;

&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;

&lt;hr&gt;

&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;In voluptate velit esse cillum&lt;/li&gt;
  &lt;li&gt;In voluptate velit esse cillum&lt;/li&gt;
  &lt;li&gt;In voluptate velit esse cillum&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-tabular-data-html" class="sg-h2 sg-title">tabular data</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><h3>Default Table</h3>
<table>
  <caption>Table Caption</caption>
  <thead>
    <tr>
      <th scope="col">thead th</th>
      <th scope="col">thead th</th>
      <th scope="col">thead th</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>tbody td</td>
      <td>tbody td</td>
      <td>tbody td</td>
    </tr>
    <tr>
      <td>tbody td</td>
      <td>tbody td</td>
      <td>tbody td</td>
    </tr>
    <tr>
      <td>tbody td</td>
      <td>tbody td</td>
      <td>tbody td</td>
    </tr>
  </tbody>
</table>



<h3>Table with side headings</h3>
<table>
  <caption>Table Caption</caption>
  <thead>
    <tr>
      <th id="th1" scope="col">thead th</th>
      <th id="th2" scope="col">thead th</th>
      <th id="th3" scope="col">thead th</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="th4" scope="row" headers="th1">tbody th</th>
      <td headers="th2 th4">tbody td</td>
      <td headers="th3 th4">tbody td</td>
    </tr>
    <tr>
      <th id="th5" scope="row" headers="th1">tbody th</th>
      <td headers="th2 th5">tbody td</td>
      <td headers="th3 th5">tbody td</td>
    </tr>
  </tbody>
</table>
</div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;h3&gt;Default Table&lt;/h3&gt;
&lt;table&gt;
  &lt;caption&gt;Table Caption&lt;/caption&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;col&quot;&gt;thead th&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;thead th&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;thead th&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;tbody td&lt;/td&gt;
      &lt;td&gt;tbody td&lt;/td&gt;
      &lt;td&gt;tbody td&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;tbody td&lt;/td&gt;
      &lt;td&gt;tbody td&lt;/td&gt;
      &lt;td&gt;tbody td&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;tbody td&lt;/td&gt;
      &lt;td&gt;tbody td&lt;/td&gt;
      &lt;td&gt;tbody td&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;



&lt;h3&gt;Table with side headings&lt;/h3&gt;
&lt;table&gt;
  &lt;caption&gt;Table Caption&lt;/caption&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th id=&quot;th1&quot; scope=&quot;col&quot;&gt;thead th&lt;/th&gt;
      &lt;th id=&quot;th2&quot; scope=&quot;col&quot;&gt;thead th&lt;/th&gt;
      &lt;th id=&quot;th3&quot; scope=&quot;col&quot;&gt;thead th&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th id=&quot;th4&quot; scope=&quot;row&quot; headers=&quot;th1&quot;&gt;tbody th&lt;/th&gt;
      &lt;td headers=&quot;th2 th4&quot;&gt;tbody td&lt;/td&gt;
      &lt;td headers=&quot;th3 th4&quot;&gt;tbody td&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th id=&quot;th5&quot; scope=&quot;row&quot; headers=&quot;th1&quot;&gt;tbody th&lt;/th&gt;
      &lt;td headers=&quot;th2 th5&quot;&gt;tbody td&lt;/td&gt;
      &lt;td headers=&quot;th3 th5&quot;&gt;tbody td&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-text-elements-html" class="sg-h2 sg-title">text elements</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><p>The <a href="#">a element</a> example</p>
<p>The <abbr>abbr element</abbr> and an <abbr title="Abbreviation">abbr</abbr> element with title examples</p>
<p>The <b>b element</b> example</p>
<p>The <cite>cite element</cite> example</p>
<p>The <code>code element</code> example</p>
<p>The <em>em element</em> example</p>
<p>The <del>del element</del> example</p>
<p>The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples</p>
<p>The <i>i element</i> example</p>
<p>The <ins>ins element</ins> example</p>
<p>The <kbd>kbd element</kbd> example</p>
<p>The <mark>mark element</mark> example</p>
<p>The <q>q element</q> example</p>
<p>The <q>q element <q>inside</q> a q element</q> example</p>
<p>The <s>s element</s> example</p>
<p>The <samp>samp element</samp> example</p>
<p>The <small>small element</small> example</p>
<p>The <span>span element</span> example</p>
<p>The <strong>strong element</strong> example</p>
<p>The <sub>sub element</sub> example</p>
<p>The <sup>sup element</sup> example</p>
<p>The <u>u element</u> example</p>
<p>The <var>var element</var> example</p></div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;p&gt;The &lt;a href=&quot;#&quot;&gt;a element&lt;/a&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;abbr&gt;abbr element&lt;/abbr&gt; and an &lt;abbr title=&quot;Abbreviation&quot;&gt;abbr&lt;/abbr&gt; element with title examples&lt;/p&gt;
&lt;p&gt;The &lt;b&gt;b element&lt;/b&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;cite&gt;cite element&lt;/cite&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;code&gt;code element&lt;/code&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;em&gt;em element&lt;/em&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;del&gt;del element&lt;/del&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;dfn&gt;dfn element&lt;/dfn&gt; and &lt;dfn title=&quot;Title text&quot;&gt;dfn element with title&lt;/dfn&gt; examples&lt;/p&gt;
&lt;p&gt;The &lt;i&gt;i element&lt;/i&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;ins&gt;ins element&lt;/ins&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;kbd&gt;kbd element&lt;/kbd&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;mark&gt;mark element&lt;/mark&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;q&gt;q element&lt;/q&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;q&gt;q element &lt;q&gt;inside&lt;/q&gt; a q element&lt;/q&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;s&gt;s element&lt;/s&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;samp&gt;samp element&lt;/samp&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;small&gt;small element&lt;/small&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;span&gt;span element&lt;/span&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;strong&gt;strong element&lt;/strong&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;sub&gt;sub element&lt;/sub&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;sup&gt;sup element&lt;/sup&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;u&gt;u element&lt;/u&gt; example&lt;/p&gt;
&lt;p&gt;The &lt;var&gt;var element&lt;/var&gt; example&lt;/p&gt;</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-base-time-html" class="sg-h2 sg-title">time</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><p>Remember, remember the <time datetime="1605-11-05">5<sup>th</sup> of November</time></p></div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;p&gt;Remember, remember the &lt;time datetime=&quot;1605-11-05&quot;&gt;5&lt;sup&gt;th&lt;/sup&gt; of November&lt;/time&gt;&lt;/p&gt;</code></pre></div></div></div></div><h1 id="sg-markup-patterns" class="sg-h1 sg-title">patterns</h1><div class="sg-section-group"><div class="sg-section"><h2 id="sg-markup-patterns-alerts-html" class="sg-h2 sg-title">alerts</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><!-- Sample pattern, your site's patterns will be different -->
<div class="alert alert-warning">
  <strong>Warning Message!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

<div class="alert alert-error">
  <strong>Error Message!</strong> Numquam quos fuga quam suscipit sapiente perferendis magnam.
</div>

<div class="alert alert-success">
  <strong>Success Message!</strong> Totam officiis dolorum voluptatibus maxime molestiae iste.
</div>

<div class="alert alert-info">
  <strong>Info Message!</strong> Consequatur facere deleniti cumque ducimus maiores nemo.
</div>
</div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;!-- Sample pattern, your site's patterns will be different --&gt;
&lt;div class=&quot;alert alert-warning&quot;&gt;
  &lt;strong&gt;Warning Message!&lt;/strong&gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit.
&lt;/div&gt;

&lt;div class=&quot;alert alert-error&quot;&gt;
  &lt;strong&gt;Error Message!&lt;/strong&gt; Numquam quos fuga quam suscipit sapiente perferendis magnam.
&lt;/div&gt;

&lt;div class=&quot;alert alert-success&quot;&gt;
  &lt;strong&gt;Success Message!&lt;/strong&gt; Totam officiis dolorum voluptatibus maxime molestiae iste.
&lt;/div&gt;

&lt;div class=&quot;alert alert-info&quot;&gt;
  &lt;strong&gt;Info Message!&lt;/strong&gt; Consequatur facere deleniti cumque ducimus maiores nemo.
&lt;/div&gt;
</code></pre></div></div></div><div class="sg-section"><h2 id="sg-markup-patterns-breadcrumbs-html" class="sg-h2 sg-title">breadcrumbs</h2><div class="sg-sub-section sg-doc"><div class="markdown-body"><p>Add your personalized documentation here.</p></div></div><div class="sg-sub-section sg-example"><h3 class="sg-h3 sg-title">Example</h3><!-- Sample pattern, your site's patterns will be different -->
<ul class="breadcrumb">
  <li><a href="#">Home</a> <span class="divider">/</span></li>
  <li><a href="#">Library</a> <span class="divider">/</span></li>
  <li class="active">Data</li>
</ul></div><div class="sg-sub-section"><div class="sg-markup-controls"><button type="button" class="sg-btn sg-btn--source">View Source</button><a class="sg-btn--top" href="#top">Back to Top</a></div><div class="sg-source"><button type="button" class="sg-btn sg-btn--select">Copy Source</button><pre class="line-numbers"><code class="language-markup">&lt;!-- Sample pattern, your site's patterns will be different --&gt;
&lt;ul class=&quot;breadcrumb&quot;&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt; &lt;span class=&quot;divider&quot;&gt;/&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt; &lt;span class=&quot;divider&quot;&gt;/&lt;/span&gt;&lt;/li&gt;
  &lt;li class=&quot;active&quot;&gt;Data&lt;/li&gt;
&lt;/ul&gt;</code></pre></div></div></div></div></div>      </div><!--/.sg-container-->
    </div><!--/.sg-main-->
  </div><!--/.sg-wrapper-->

  <!--[if gt IE 8]><!--><script src="vendor/prism/prism.js"></script><!--<![endif]-->
  <script src="js/sg-scripts.js"></script>
</body>
</html>

